import React, { Component } from 'react';

// 类组件中的事件绑定this 处理

// 方式1: 使用Constructor 这个构造函数,在该构造函数中给事件处理函数绑定this
class Myclsthis extends Component {
    // constructor() {
    //     super();
    //     // 执行初始化操作
    //     console.log(this);
    //     // 给事件handClickFn绑定this, 让其内部有this
    //     this.handClickFn = this.handClickFn.bind(this, '吴亦凡')
    // }

    // 定义的事件处理函数
    // handClickFn(name, e) {
    //     console.log('this', this);
    //     console.log(name);
    //     console.log(e);
    // }
    handClickFn = (e) => {
        console.log('this', this);
        console.log(e);
    }
    render() {
        return (
            <div>
                {/* 通过constructor绑定this,优点: 可以绑定参数 缺点: 传递参数不方便 */}
                <button onClick={this.handClickFn}>方式1-事件绑定</button>
                {/* 行内绑定this,优点: 可以传参, */}
                <button onClick={this.handClickFn.bind(this, '邓伦')}>方式2-事件绑定</button>
                {/* 行内事件箭头函数的形式绑定this ,优点: 可以传参 */}
                <button onClick={(e) => this.handClickFn('薇娅', e)}>方式2-事件绑定</button>
                {/* 将执行函数写成箭头函数的形式 缺点:不可以传参 */}
                <button onClick={this.handClickFn}>方式2-事件绑定</button>
            </div>
        );
    }
}


export default Myclsthis;
